<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>数字相加效果</title>
 </head>
 <body>
  
  <style type="text/css">
  .main {height:300px;width:500px;margin:0 auto;border:1px solid red;text-align:center;position:relative;}
  .main .dd{height:100px;width:100px;border:1px solid red;margin:auto;text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;}
  </style>

  <div class="main">

  <div class="dd">11</div>
  <br>
  <button  class="btn1" onclick="timer()">click</button>
  <button  class="btn2" onclick="cls()">clear</button>
  </div>

  <script type="text/javascript">

   var count =i=0
   odiv= document.querySelector(".dd")
   obtn1= document.querySelector(".btn1")
   obtn2= document.querySelector(".btn2")


function cls(){
	obtn1.removeAttribute("disabled"); 
	odiv.innerText="0"
	count = i =0
	clearTimeout(tt)
} 
    
 
 
function timer() {
	if (count == 1000) { 
	return false;
	}
     else   {	 
	obtn1.setAttribute("disabled", true);
	count=count+10
	odiv.innerText=count
}

tt=setTimeout(function() {timer() },10)
}	 
 
 
  </script>
 </body>
</html>


